import React, { Component } from "react";
import "./index.less";
import { Steps, Table, Input, Button, Modal, List } from "antd";
import Img from "../../assets/images/logo.png";
import warming from "../../assets/images/ic_warming.png";
import AddnewAddress from "../../components/addnew-address";
const { Step } = Steps;
const { Search } = Input;

export default class OrderQueryDetail extends Component {
  state = {
    isPresonMes: 0,
    // 仅退款默认关闭
    isRightsDeal: true,
    // 控制弹窗的高度
    top: 50
  };

  //   动态切换收货人信息
  presonMes = () => {
    let _html;
    if (this.state.isPresonMes === 0) {
      _html = (
        <>
          <div className="main">
            收货人信息 <span onClick={this.updatePresonMes}>修改</span>{" "}
            <span>复制</span>
          </div>
          <div>收货人：阿宝</div>
          <div>联系电话：15679042344</div>
          <div>收货地址：浙江省 杭州市 滨江区 花园，3幢603</div>
        </>
      );
    } else if (this.state.isPresonMes === 1) {
      _html = (
        <>
          <div className="main">
            收货人信息 <span onClick={this.rewirtePresonMes}>确定</span>{" "}
            <span className="cancle">取消</span>
          </div>
          <div>
            <span className="title-width">收货人：</span>
            <Input className="input-width" />
          </div>
          <div>
            <span className="title-width">联系电话：</span>
            <Input className="input-width" />
          </div>
          <div>
            <span className="title-width">收货地址：</span>
            <Input className="input-width" />
          </div>
        </>
      );
    }
    return _html;
  };
  //   去修改的文本
  updatePresonMes = () => {
    this.setState({
      isPresonMes: 1
    });
  };
  // 去显示的文本
  rewirtePresonMes = () => {
    this.setState({
      isPresonMes: 0
    });
  };
  //   打开仅退款弹窗
  showRemarkModal = () => {
    this.setState({ isRightsDeal: true });
  };
  //   关闭仅退款弹窗
  hideRightsDealModal = () => {
    this.setState({ isRightsDeal: false });
  };
  //   选择地址
  selAddress = () => {
    console.log("默认地址");
  };
  render() {
    // 动态切换收货人信息
    let dynamicText = this.presonMes();
    const columns = [
      {
        width: 250,
        title: "商品",
        dataIndex: "name",
        render: text => (
          <div className="order-info-table">
            <img src={Img} alt="" />
            <div className="order-info">
              <div>高级木椅</div>
              <div>源自大师手艺，注入心血</div>
            </div>
          </div>
        )
      },
      {
        title: "单价(元)",
        dataIndex: "num"
      },
      {
        title: "数量",
        dataIndex: "num"
      },
      {
        title: "状态",
        dataIndex: "address"
      },
      {
        title: "优惠(元)",
        dataIndex: "address"
      },
      {
        title: "小计(元)",
        dataIndex: "address"
      },
      {
        title: "退款状态",
        dataIndex: "address"
      },
      {
        title: "发货状态",
        dataIndex: "age"
      }
    ];
    const data = [
      {
        key: "1",
        name: "John Brown",
        age: 3524524552,
        num: 7,
        address: "待发货"
      }

      // {
      //   key: "4",
      //   name: "Disabled User",
      //   age: 524542623499,
      //   num: 22,
      //   address: "待发货"
      // }
    ];
    const data1 = [
      {
        id: 1,
        address: "【阿波 收】浙江省杭州市滨江区 东冠大厦3445 15678901234"
      },
      {
        id: 2,
        address: "【阿波 收】浙江省杭州市滨江区 东冠大厦3445 15678901234"
      },
      {
        id: 3,
        address: "【阿波 收】浙江省杭州市滨江区 东冠大厦3445 15678901234"
      },
      {
        id: 4,
        address: "【阿波 收】浙江省杭州市滨江区 东冠大厦3445 15678901234"
      },
      {
        id: 5,
        address: "【阿波 收】浙江省杭州市滨江区 东冠大厦3445 15678901234"
      },
      {
        id: 6,
        address: "【阿波 收】浙江省杭州市滨江区 东冠大厦3445 15678901234"
      },
      {
        id: 7,
        address: "【阿波 收】浙江省杭州市滨江区 东冠大厦3445 15678901234"
      },
      {
        id: 8,
        address: "【阿波 收】浙江省杭州市滨江区 东冠大厦3445 15678901234"
      },
      {
        id: 9,
        address: "【阿波 收】浙江省杭州市滨江区 东冠大厦3445 15678901234"
      }
    ];
    return (
      //   <div className="query-detail">
      //     {/* 订单号 */}
      //     <div class="info">
      //       <span className="info-distance">订单号：E265247924856-4-523947</span>
      //       <span className="info-distance">下单时间：2019-07-04 16:09:56</span>
      //       <span className="info-distance">普通订单</span>
      //       <span>支付宝小程序</span>
      //     </div>
      //     {/* 发货进度条 */}
      //     <div className="progress">
      //       {/* 左 */}
      //       <div className="left">
      //         <div className="left-first">买家已付款，等待商家发货</div>
      //         <div className="left-second">
      //           买家有申请退款，需先处理完退款申请才能进行后续发货
      //         </div>
      //         <div className="left-third">[高级木椅]买家申请了退款</div>
      //         <div className="left-fourth">处理退款</div>
      //         <div className="remark">备注</div>
      //       </div>
      //       {/* 右 */}
      //       <div className="right">
      //         <Steps size="small" current={3}>
      //           <Step title="买家下单" description="2019-07-04 16:09:56" />
      //           <Step
      //             title="买家付款"
      //             // subTitle="Left"
      //             description="2019-07-04 16:09:56"
      //           />
      //           <Step title="商家发货" description="2019-07-04 16:09:56" />
      //           <Step title="交易完成" description="2019-07-04 16:09:56" />
      //         </Steps>
      //       </div>
      //     </div>
      //     {/* 提醒 */}
      //     <div className="remind">
      //       <div>备注：阿卡好卡</div>
      //       <div className="pay-attention">
      //         <div className="attention">提醒：</div>
      //         <div>
      //           <div>如果无法发货，请及时与买家联系并说明情况后进行退款；</div>
      //           <div>
      //             买家申请退款后，须征得买家同意后再发货，否则买家有权拒收货物；
      //           </div>
      //           <div>买家付款后超过7天仍未发货，将有权申请介入发起退款维权；</div>
      //         </div>
      //       </div>
      //     </div>
      //     {/* 收货人信息 */}
      //     <div className="consignee-information">
      //       <div className="information">
      //         {/* 收货人 */}
      //         <div className="consignee">
      //           {dynamicText}
      //         </div>
      //         {/* 配送信息 */}
      //         <div className="consignee">
      //           <div className="main">配送信息</div>
      //           <div>配送方式：快递</div>
      //         </div>
      //         {/* 付款信息 */}
      //         <div className="consignee">
      //           <div className="main">付款信息</div>
      //           <div>实付金额：¥1.00</div>
      //           <div>付款方式：支付宝支付</div>
      //           <div>付款时间：2019-07-04 16:09:56</div>
      //         </div>
      //         {/* 配送信息 */}
      //         <div className="consignee">
      //           <div className="main">买家信息</div>
      //           <div>买家：233453456</div>
      //           <div className="leave-message">买家留言：-</div>
      //         </div>
      //       </div>
      //     </div>
      //     {/* 商品列表 */}
      //     <div>
      //       <Table
      //         // rowSelection={rowSelection}
      //         columns={columns}
      //         dataSource={data}
      //         pagination={false}
      //       />
      //     </div>
      //     {/* 订单金额： */}
      //     <div className="order-price">
      //       <div>
      //         商品总价：<span className="spec">¥1.00</span>
      //       </div>
      //       <div className="conpon">
      //         优惠：<span className="spec">-¥1sss.00</span>
      //       </div>
      //       <div className="order-amount">
      //         订单金额：<span className="spec pay-money">¥1222.00</span>
      //       </div>
      //     </div>
      //   </div>

      <div className="claims-refund">
        {/* 进度条 */}
        <div className="refund-step">
          <Steps size="small" current={1}>
            <Step title="买家申请退款" description="2019-07-04 16:09:56" />
            <Step
              title="商家处理退款申请"
              // subTitle="Left"
              description="2019-07-04 16:09:56"
            />
            {[] == ![] ? (
              <Step title="退款完成2" description="2019-07-04 16:09:56" />
            ) : null}

            <Step title="退款完成" description="2019-07-04 16:09:56" />
          </Steps>
        </div>
        {/* 退款申请 */}
        <div className="refund-part">
          {/* 左 */}
          <div className="part-left">
            {/* 售后维权   */}
            <div className="after-activist">
              <b>售后维权</b>
              <div className="order-info-table">
                <img src={Img} alt="" />
                <div className="order-info">
                  <div>高级木椅</div>
                  <div>源自大师手艺，注入心血</div>
                </div>
              </div>
            </div>
            {/* 维权编号： */}
            <div className="expected-results">
              <div>
                <span>期望结果：</span> 仅退款
              </div>
              <div>
                <span>退款金额：</span> 1.00 元
              </div>
              <div>
                <span>维权原因：</span> 协商一致退款
              </div>
              <div>
                <span>维权编号：</span> 84375256834673479674328
              </div>
              <div>
                <span>联系电话：</span> 13445678902
              </div>
              <div>
                <span>退款说明：</span> -
              </div>
            </div>
            {/* 订单编号 */}
            <div className="expected-results order-no">
              <div>
                <span>订单编号：</span> E2345794576349863046
              </div>
              <div>
                <span>付款时间：</span> 2019-07-04 16:09:56
              </div>
              <div>
                <span>买家：</span> 8437525683
              </div>
              <div>
                <span>物流信息：</span> 8437525683467674328
              </div>
              <div>
                <span>合计优惠：</span> 0.00元
              </div>
              <div>
                <span>实付金额：</span> 1.00元
              </div>
            </div>
          </div>
          {/* 右 */}
          <div className="part-right">
            <div className="deal-with">
              <div className="area">
                {/* 退款成功显示的文本 */}
                {/* <div className="warn">
                  <img src={warming} alt="" />
                  <span>退款成功</span>
                </div>
                <div className=" reset-time the-refund-amount">
                  退款金额：1.00元 <span>查看退款去向</span>
                </div> */}
                {/* 退款申请显示的文本 */}
                <div className="warn">
                  <img src={warming} alt="" />
                  <span>等待商家处理退款申请</span>
                </div>
                <div className="reset-time">
                  <div>收到买家仅退款申请，请尽快处理。</div>
                  <div className="countdown">
                    请在 <span>5天22小时20分钟01秒</span>{" "}
                    处理本次退款，如逾期未处理，将自动同意退款。
                  </div>
                  <div className="btn-area">
                    <Button
                      className="btn"
                      onClick={this.showRemarkModal}
                      type="primary"
                    >
                      同意买家退款
                    </Button>
                    <Button className="btn">同意买家退款</Button>
                    <Button className="btn">发货</Button>
                  </div>
                </div>
              </div>
              {/* 卖家备注 */}
              <div className="seller-note">卖家备注：卡收费哈额</div>
              {/* 提醒 */}
              <div className="remind">
                <div className="tip">提醒：</div>
                <div>如果未发货，请点击同意退款给卖家。</div>
                <div>如实际已发货，请主动与买家联系。</div>
                <div>
                  如果你逾期未处理，视作同意买家申请，系统将自动退款给买家。
                </div>
                <div>
                  开启“退款退券”后，如果订单全额退款，优惠券会退还给买家
                </div>
              </div>
            </div>
            <div></div>
          </div>
        </div>
        {/* 备注 */}
        <Modal
          style={{ marginTop: this.state.top }}
          width="620px"
          title="维权处理"
          visible={this.state.isRightsDeal}
          // onOk={this.hideModal}
          onCancel={this.hideRightsDealModal}
          okText="保存"
          footer={[
            <Button
              key="submit"
              type="primary"
              onClick={this.hideRightsDealModal}
            >
              {true === 0 ? "同意" : "同意退货，发送退货地址"}
            </Button>
          ]}
          // footer={null}
          // cancelText="取消"
        >
          <div className="rights-deal-model">
            <div className="explain">
              该笔订单通过“微信支付”付款，需你同意退款申请，买家才能退货给你；买家退货后你需要再次确认收货
              后，退款将自动原路退回至买家付款账户；
            </div>
            <div className="explain-style">处理方式：仅退款</div>
            <div className="refund-num">
              退款数量：<span>1</span>
            </div>
            <div className="refund-price">
              退款金额：<span>¥ 1.00</span>
            </div>
            {/* 退货地址 */}
            <div className="return-address">
              <div>退货地址：</div>
              <div className="search">
                <Search
                  placeholder="请输入联系人或详细地址"
                  onSearch={value => console.log(value)}
                  style={{ width: 200 }}
                />
              </div>
              {true === 0 ? (
                <div className="manger-address">管理地址</div>
              ) : (
                <div className="manger-address del">删除</div>
              )}
            </div>
            {/* 选择地址 */}
            <div
              style={{
                height: 200,
                background: "#F8F8F8",
                overflowY: "scroll",
                marginTop: 15
              }}
            >
              <List
                size="large"
                dataSource={data1}
                renderItem={item => {
                  return (
                    <List.Item>
                      <div>
                        {item.address}{" "}
                        <span
                          style={{ color: "#2F84FF" }}
                          onClick={this.selAddress}
                        >
                          {item.id === 1 ? "默认地址" : ""}
                        </span>
                      </div>
                    </List.Item>
                  );
                }}
              />
            </div>
            {/* 使用新地址 */}
            <div className="pre-color">使用新地址</div>
            <div>
              <AddnewAddress />
            </div>
          </div>
        </Modal>
      </div>
    );
  }
}
